<!-- 基础调查-左侧tabs组件: leftTabs -->
<template>
	<view class="tabs-body">
		<view v-for="(item, index) in list" :key="index" class="item"
			:class="activeValue === item.value ? 'item-active' : ''" @click="onClickItem(item.value)">
			<text class="name">{{ item.name }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeValue: 1,
				list: [{
						name: '基本信息',
						value: 0
					},
					{
						name: '生产管理',
						value: 1
					},
					{
						name: '敏感点',
						value: 2
					},
					{
						name: '气象资料',
						value: 3
					},
					{
						name: '水文地质',
						value: 4
					},
					{
						name: '地下水井',
						value: 5
					},
					{
						name: '生产管理',
						value: 6
					},
					{
						name: '敏感点',
						value: 7
					},
					{
						name: '气象资料',
						value: 8
					},
					{
						name: '水文地质',
						value: 9
					},
					{
						name: '地下水井',
						value: 10
					},
					{
						name: '生产管理',
						value: 11
					},
					{
						name: '敏感点',
						value: 12
					},
					{
						name: '气象资料',
						value: 13
					},
					{
						name: '水文地质',
						value: 14
					},
					{
						name: '地下水井',
						value: 15
					}
				]
			}
		},
		methods: {
			onClickItem(e) {
				this.activeValue = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-body {
		.item {
			padding: $padding-base $padding-sm;
			text-align: center;
			position: relative;
			background-color: #F3F3F3;

			.name {
				font-size: 32rpx;
			}
		}

		.item::after {
			content: "";
			width: 80rpx;
			height: 3rpx;
			position: absolute;
			background-color: #FFFFFF;
			bottom: 0;
			left: 18rpx;
		}

		.item-active {
			background-color: #FFFFFF;
			color: $uni-color-primary;
			font-weight: 600;
			position: relative;
		}

		.item-active::after {
			content: "";
			width: 5rpx;
			height: 50rpx;
			position: absolute;
			background-color: $uni-color-primary;
			top: 40rpx;
			left: 2rpx;
		}
	}
</style>